Создать в src/app/(site) на bootstrsap окно поиска из api

disel

Создание окна поиска на Bootstrap с использованием API в src/app/(site) в Next.js

Давайте создадим окно поиска, которое будет использовать Bootstrap для стилизации и API для получения данных. Мы будем использовать Next.js и разместим компонент в папке src/app/(site).

1. Установка Bootstrap

Сначала установим Bootstrap в ваш проект Next.js:

bash

1
npm install bootstrap

Затем подключите CSS Bootstrap в файле src/app/globals.css:

css

1
@import "bootstrap/dist/css/bootstrap.min.css";

2. Создание компонента поиска

Создайте файл SearchBox.js в папке src/app/(site):

javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
"use client";
 
import { useState } from "react";
 
export default function SearchBox() {
  const [query, setQuery] = useState(""); // Состояние для ввода
  const [results, setResults] = useState([]); // Состояние для результатов поиска
  const [loading, setLoading] = useState(false); // Состояние загрузки
 
  // Функция для выполнения поиска
  const handleSearch = async (e) => {
    e.preventDefault();
    setLoading(true);
 
    try {
      // Пример API-запроса (замените URL на ваш API)
      const response = await fetch(`https://api.example.com/search?q=${query}`);
      const data = await response.json();
      setResults(data.results || []); // Предполагаем, что API возвращает массив результатов
    } catch (error) {
      console.error("Ошибка при выполнении поиска:", error);
    } finally {
      setLoading(false);
    }
  };
 
  return (
    <div className="container mt-5">
      <h1 className="mb-4">Поиск</h1>
      <form onSubmit={handleSearch} className="mb-4">
        <div className="input-group">
          <input
            type="text"
            className="form-control"
            placeholder="Введите запрос..."
            value={query}
            onChange={(e) => setQuery(e.target.value)}
          />
          <button className="btn btn-primary" type="submit" disabled={loading}>
            {loading ? "Поиск..." : "Искать"}
          </button>
        </div>
      </form>
 
      {/* Отображение результатов */}
      <div>
        {results.length > 0 ? (
          <ul className="list-group">
            {results.map((result, index) => (
              <li key={index} className="list-group-item">
                {result.title || "Результат"} - {result.description || "Описание"}
              </li>
            ))}
          </ul>
        ) : (
          !loading && <p>Нет результатов</p>
        )}
      </div>
    </div>
  );
}

3. Добавление компонента в page.js

Теперь подключим компонент SearchBox в файл src/app/(site)/page.js:

javascript

1
2
3
4
5
6
7
8
9
import SearchBox from "./SearchBox";
 
export default function Page() {
  return (
    <div>
      <SearchBox />
    </div>
  );
}

4. Пример API

Если у вас еще нет API, вы можете использовать публичный API для тестирования, например:

  • JSONPlaceholder: https://jsonplaceholder.typicode.com/posts?q=
  • Open Library API: https://openlibrary.org/search.json?q=

Пример изменения API-запроса в SearchBox.js:

javascript

1
2
3
const response = await fetch(`https://openlibrary.org/search.json?q=${query}`);
const data = await response.json();
setResults(data.docs || []); // Open Library возвращает массив `docs`

5. Запуск проекта

Запустите проект с помощью команды:

bash

1
npm run dev

Откройте браузер и перейдите на http://localhost:3000. Вы увидите окно поиска, которое отправляет запросы к API и отображает результаты.

6. Дополнительные улучшения

  • Обработка ошибок: Добавьте пользовательские сообщения об ошибках, если API недоступен.
  • Скелетон загрузки: Вместо текста «Поиск…» можно добавить анимацию загрузки.
  • Пагинация: Если API поддерживает пагинацию, добавьте кнопки «Следующая страница» и «Предыдущая страница».

Если у вас есть дополнительные вопросы или проблемы, дайте знать! 😊

Похожие записи/страницы: